import React from 'react'
import '../css/calculation.css'
import wrapWithTryCatch from 'react-try-catch-render'



class Calculation extends React.Component {
	constructor(props) {
		super(props);
		this.state = {input: '',history: [],expression:'',isShow:false,buttonContent:'点击显示历史内容'};
	}

	componentWillReceiveProps(nextProps) {
		if(nextProps.input){
			this.state.history.push(`${nextProps.expression} = ${nextProps.input}`);
		}
			this.setState({input: nextProps.input,
				time: nextProps.time,
				expression: nextProps.expression,
				history: this.state.history});
			if(nextProps.error){
			alert(nextProps.error)
}
	}

	handClick(a) {
		let str = this.state.input;
		// let s = str.charAt(str.length - 1);
		switch (a) {
			case 'back':
				str = str.substring(0, str.length - 1)
				return this.setState({
					input: str
				});
			case 'clear':
				return this.setState({
					input: '',
					expression:''
				});
			case '=':
				this.props.calculation(this.state.input);
				 break;
			case 'void':
				return this.setState({
					history:[]
				})
			default:
				return this.setState({
					input: `${str}${a}`
				});

		}
	}
	showHistory() {
		this.setState({
			isShow : !this.state.isShow,
			buttonContent: !this.state.isShow?'点击收起历史内容':'点击显示历史内容'
		})
	}
	render() {

		let buttons = [{
			type: 'button',
			value: 'clear',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '(',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: ')',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '+',
			class: 'commonCss otherCss'
		},{
			type: 'button',
			value: '1',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '2',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '3',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '-',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '4',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '5',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '6',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '*',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '7',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '8',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '9',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: '/',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '0',
			class: 'commonCss numerCss'
		}, {
			type: 'button',
			value: 'back',
			class: 'commonCss otherCss'
		}, {
			type: 'button',
			value: '=',
			class: 'equalCss'
		}]
let divWrap = {
	textAlign:'center',
	width:'100%',
	height:440
}

let divHistoryContainer = {
	textAlign:'left',
	overflow:'scroll',
	width:320,
	height:400
}
let buttonWrap = {
	width:400,
	boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)',
	textAlign:'center',
	marginLeft:'25%',
	display:'inline-block',
	float:'left'
}

let history ='';
if(this.state.isShow){
	history+= 'divWrapHistory';
}else{
	history+= 'hideHistory';
}
		return (
			<div>
				<div>
					<hr />
				</div>
				<h2>Calculation</h2>
				<div style={divWrap}>
					<div style={buttonWrap}>
						<div>
							<input value={this.state.expression}  className="showExpression" disabled />
						
							<input value={this.state.input}  className="inputCss" disabled />
						</div>
						<div >
						{	
							buttons.map(function(item,index){
								return (
								<button key={index} 
								onClick = { () => this.handClick(item.value) }
								className={item.class}
								>{item.value}
								
								</button>
								)
							},this)
						}
						</div>
					</div>
					<div className={history}>
					<div>历史记录</div>
					<button onClick={() => this.handClick('void')} >清空历史记录</button>
						<div style={divHistoryContainer}>
							<ol>
							{
								this.state.history.map(function(history,index){
									// console.log(history)
								return(
									<li key={index}>{history}</li>
								)
							})}
							</ol>
						</div>
					</div>
					<button className="showHistoryButton" onClick={() => this.showHistory()}>{this.state.buttonContent}</button>
				</div>
				
			</div>
			)
	}
}

export default wrapWithTryCatch(React,Calculation)(Calculation)


